<template>
  <div class="article_list">
    <van-pull-refresh
    v-model="loading"
    success-text="刷新成功"
    @refresh="handlerRefresh"
    >
      <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false"
    offset="50"
    @load="handlerLoad"
    >
    <article-item v-for="obj in articleList" :key="obj.art_id" :item="obj"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/home'
export default {
  name: 'ArticleList',
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 用户分页的时间戳默认当前时间戳
      timestamp: Date.now(),
      articleList: [],
      // 控制每一页的加载状态
      loading: false,
      // 控制整个列表的加载状态
      finished: false,
      // 控制是上拉加载状态还是下拉刷新
      isUp: true
    }
  },
  methods: {
    // 获取文章列表
    async getArticleList (flag) {
      const resp = await getArticleListAPI(this.channel.id, this.timestamp)
      const { results, pre_timestamp: timestamp } = resp.data
      // 如果后台没数据了，把finished设为true
      if (!results.length || !timestamp) {
        this.finished = true
        return
      }
      // 合并新旧数组，
      // 第一次执行的时候空数组合并不影响
      // 2-n次旧新数组合并
      if (flag) {
        // 上拉加载更多数据，旧新数组合并
        this.articleList = [...this.articleList, ...results]
      } else {
        // 下拉刷新数据，新旧数组合并
        this.articleList = [...results, ...this.articleList]
      }

      this.timestamp = timestamp
      // 重置loading
      this.loading = false
    },
    // 上拉加载
    handlerLoad () {
      this.isUp = true
      this.getArticleList(this.isUp)
    },
    // 下拉刷新
    handlerRefresh () {
      this.isUp = false
      this.getArticleList(this.isUp)
    }
  },
  created () {
    this.getArticleList()
  }
}
</script>

<style>
  .article_list{
    /* 限制内容部分的高度，calc函数可以跨单位运算,140是头部，加频道导航和底部的和，减号前面都要有空格 */
    height: calc(100vh - 140px);
    /* 超出部分滚动 */
    overflow-y: scroll;
  }
</style>
